<template>
  <view>
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        indicator-active-color="#0173DE"
        indicator-color="#fff"
      >
        <swiper-item v-for="(item, index) in list" :key="index">
          <view class="swiper-item uni-bg-red">
            <image :src="item.cover_cdn"></image>
          </view>
        </swiper-item>
      </swiper>

      <button class="order" @click="project">开始预约</button>
      <button class="process" @click="process">预约流程</button>
    </view>
  </view>
</template>

<script>
export default {
  async onShow() {
    let result = await this.$u.api.index.banner();
    // console.log(result.data);
    this.list = result.data
  },
  data() {
    return {
      background: ['color1', 'color2', 'color3'],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      list: []
    }
  },
  onLoad() {

  },
  methods: {
    process() {
      this.$u.route({
        url: '/pages/process/process',
        type: 'navigateTo',
      })
    },
    project() {
      this.$u.route({
        url: '/pages/project/index',
        type: 'navigateTo',
      })
    }
  }
}
</script>

<style>
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 50rpx;
}

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}

.uni-margin-wrap image {
  width: 100%;
}

/* 开始预约 */
.order {
  width: 200px;
  height: 50px;
  background-color: #0173de;
  color: #fff;
  margin-bottom: 20px;
}

/* 预约流程 */
.process {
  width: 200px;
  height: 50px;
  background-color: #0173de;
  color: #fff;
}
</style>
